﻿<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- Title -->
    <title>Rapid - A Responsive WordPress Blog Theme</title>
    
    <!-- /favicon -->
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/assets1/css/bootstrap.min.css">

    <!--矢量图标-->
    <link rel="stylesheet" href="/style/icon/icon.css">
    
    <!-- Font awesome CSS -->
    <link rel="stylesheet" href="/assets1/css/font-awesome.min.css">
    
    <!-- Animate CSS -->
    <link rel="stylesheet" href="/assets1/css/animate.min.css">
    
    <!-- OwlCarousel CSS -->
    <link rel="stylesheet" href="/assets1/css/owl.carousel.css">
    
    <!-- SlickNav CSS -->
    <link rel="stylesheet" href="/assets1/css/slicknav.min.css">
    
    <!-- Magnific popup CSS -->
    <link rel="stylesheet" href="/assets1/css/magnific-popup.css">
    
    <!-- Main CSS -->
    <link rel="stylesheet" href="/assets1/css/style.css">
    
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="/assets1/css/responsive.css">

</head>
<body>



<!-- 头部图片logo 开始 -->
<section  th:replace="~{common/blogHead :: blogHead}">
</section>
<!-- 头部图片logo 结束 -->

<!-- 头部菜单 开始-->
<section  th:replace="~{common/blogMenu :: blogMenu}">
</section>
<!-- 头部菜单 结束 -->

    
    
    <!-- 面包屑起始 -->
    <section class="rapid-breadcromb-area section_50">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="breadcromb">
                        <h3>游客注册</h3>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 面包屑结束 -->
    
    
    
    <!-- 内容区域起始 -->
    <section class="rapid-Allpost-area section_50">
        <div class="container">
            <div class="row">
                <div class="col-md-9">
                    <div class="blog-page-left">
                        <div class="single-blog">
                            <div class="blog-text single-post-text">
                                <div class="rapid-leave-comment ">
                                    <h2>注册</h2>
                                    <form method="post" action="/visitor/register" >
                                        <label for="visitorName">昵称：</label>
                                        <input id="visitorName" class="ns-com-name" style="width: 70%" name="visitorName" placeholder="昵称..." type="text" th:value="${visitorRegister != null ? visitorRegister.visitorName : ''}" required><br/>
                                        <label for="visitorEmail">邮箱：</label>
                                        <input id="visitorEmail" class="ns-com-name" style="width: 70%" name="visitorEmail" placeholder="邮箱..." type="email" th:value="${visitorRegister != null ? visitorRegister.visitorEmail : ''}" required><br/>
                                        <label for="password">密码：</label>
                                        <input id="password" class="ns-com-name" style="width: 70%" name="password" placeholder="密码" type="password" th:value="${visitorRegister != null ? visitorRegister.password : ''}" required><br/>
                                        <label for="password2">确认密码：</label>
                                        <input id="password2" class="ns-com-name" style="width: 70%" name="password2" placeholder="确认密码" type="password" th:value="${password2 != null ? password2 : ''}" required><br/>
                                        <input id="registerSubmit" style="width: 100px" type="submit" value="注册" >
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--右侧主内容开始-->
                <div  th:replace="~{common/blogRight :: blogRight}"></div>
                <!--右侧主内容结束-->
            </div>
        </div>
    </section>
    <!-- 内容区域结束 -->



<!-- 页脚区域开始 -->
<footer th:replace="~{common/blogDown :: blogDown}">
</footer>
<!-- 页脚区域结束 -->

    <!-- jQuery -->
    <script src="/assets1/js/jquery.min.js"></script>
    
    <!-- Bootstrap JS -->
    <script src="/assets1/js/bootstrap.min.js"></script>
    
    <!-- Magnific Popup JS -->
    <script src="/assets1/js/jquery.magnific-popup.min.js"></script>
    
    <!-- OwlCarousel JS -->
    <script src="/assets1/js/owl.carousel.min.js"></script>
    
    <!-- SlickNav JS -->
    <script src="/assets1/js/jquery.slicknav.min.js"></script>
    
    <!-- Custom JS -->
    <script src="/assets1/js/custom.js"></script>

<!--全局\退出js-->
<script src="/assets1/js/common.js"></script>
<script>
    //Email信息显示
    $(function () {
        $("[data-toggle='popover']").popover();
    });


    <!--已有窗口跳转（避免创建多个重复窗口）(抖音，小红书跳转)-->
    const windows = {};  // 用于存储打开的窗口

    $('.external-link').on('click', function(e) {
        e.preventDefault();

        const url = $(this).attr('href');  // 获取链接目标 url
        const name = url.replace(/\W/g, '');  // 移除非字母数字字符用作窗口名称

        // 如果窗口未打开，或者窗口已经被关闭，则重新打开窗口
        if (typeof windows[name] == 'undefined' || windows[name].closed) {
            windows[name] = window.open(url, name);
        } else {
            windows[name].focus();  // 否则，让已打开的窗口获取焦点
        }
    });

    //监控注册按钮
    $(document).ready(function() {
        $('#registerSubmit').on('click', function(e) {
            if ($('#password').val() !== $('#password2').val()) {
                e.preventDefault();//阻止表单提交
                alert('两次输入密码的不相同，请重新输入密码！');
            }

            // 获取邮箱输入值
            const email = $('#visitorEmail').val();

            // 自定义邮箱正则表达式验证
            const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

            if (!emailPattern.test(email)) {//邮件验证
                e.preventDefault(); // 阻止表单提交
                alert('请输入有效的邮箱地址！');
                $('#visitorEmail').focus(); // 将焦点定位到邮箱输入框
            }

        });

        $('#logoutLink').on('click', function(e) {
            e.preventDefault();
            logout();  // 在这里我可以直接使用common.js中定义的logout()函数
        });
    });

</script>
<script th:inline="javascript">
    const errMessage = [[${errMessage}]];

    window.onload = function() {
        if(errMessage !== null){
            alert(errMessage);
        }
    };
</script>
</body>
</html>
